<template>
  <div id="login">
    <div class="log_box">
      <div class="cnt_w">
        <el-form
          :model="ruleFormlogin"
          status-icon
          :rules="ruleslogin"
          ref="ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              v-model.trim="ruleFormlogin.username"
              :maxlength="6"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              type="password"
              v-model.trim="ruleFormlogin.password"
              :maxlength="10"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="loginfun()" class="btn"
          >{{logbtn}}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      logbtn:'登陆',//登录按钮
      //表单
      ruleFormlogin: {
        // 用户名
        username: "admin",
        // 用户密码
        password: "admin",
      },
      // 表单验证
      ruleslogin: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 10,
            message: "长度在 4 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    // 登录
    loginfun() {
      this.logbtn='登陆中...'
      this.$postapi('/user/login',this.ruleFormlogin,'form').then(res=>{
        if(res.code===200){
          this.logbtn='登陆'
          this.$router.replace('/index')
        }else{
          this.logbtn='登陆'
          this.$message.error(res.msg)
        }
      }).catch(error=>{
        this.logbtn='登陆'
        this.$message.error("网络错误")
      })
    },
  },
};
</script>

<style scoped lang="less">
#login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgb(249, 249, 249);
  background-image: linear-gradient(
      to right,
      rgba(235, 233, 230, 0.5) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(235, 233, 230, 0.5) 1px, transparent 1px);
  background-size: 20px 20px; /* 格子的大小 */
  .log_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    .btn {
      width: 100% !important;
    }
  }
}

/* 手机和平板设备上的媒体查询 */
@media only screen and (max-width: 768px) {
  #login {
    .log_box {
      width: 90%;
    }
  }
}
</style>